<template>
 <view class="form-container">
  <form @submit="formSubmit" report-submit="true">
    <view class="row">
      <label>会员昵称</label>
      <input placeholder="请输入昵称" />
    </view>
    <view class="row">
      <label>姓名</label>
      <input placeholder="请输入姓名"/>
    </view>
    <view class="row">
      <label>性别</label>
      <radio  value="male" />男
      <radio class="right-radio" value="female" checked/>女
    </view>
    <view class="row">
      <label>手机</label>
      <input password type="number" />
    </view>
    <view class="row">
      <label>会员类型</label>
      <radio value="golden" checked/>VIP
      <radio class="right-radio" value="normal"/>普通会员
    </view>
    <view class="submit-row">
      <button type="primary" formType="submit">Submit</button>
    </view>
    <!-- <button formType="submit">Submit</button>
    <button formType="reset">Reset</button> -->
  </form>
</view>
</template>

<script>

export default {
  data () {
    return {
      userInfo: {},
      userCode:'',
      access_token:'',
      templateId:'',
      openid:''
    }
  },
  components: {
  },
  methods: {
      getUserInfo () {
        var self=this;
        // 调用登录接口
        wx.login({
          success: (res) => {
            // console.log('res',res);
            self.userCode=res.code;
            wx.request({
              url: 'https://api.weixin.qq.com/sns/jscode2session', 
              // url: 'https://localhost:8081', 
              data: {
                'appid': 'wxf999affa32d4c44e',
                'secret': 'eae5cfd2ea6628d56433240470ce3e5c',
                'js_code':res.code,
                'grant_type':'authorization_code'  
              },
              method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
              // header: {}, // 设置请求的 header
              success: function(res){
                console.log('成功' + res);
                self.openid=res.data.openid;
                // this.access_token=;
           
              },
              fail: function(err) {
                console.log('失败' + err);
              },
              complete: function() {
              }
            })
            // wx.getUserInfo({
            //   success: (res) => {
            //     this.userInfo = res.userInfo
            //   }
            // })
          }
        })
      },
      clickHandle (msg, ev) {
        // console.log('clickHandle:', msg, ev)
      },
      formSubmit(e) {
        var self=this;
        wx.request({
          url: 'https://api.weixin.qq.com/cgi-bin/token',
          data: {
            grant_type:'client_credential',
            appid: 'wxf999affa32d4c44e',
            secret: 'eae5cfd2ea6628d56433240470ce3e5c'
          },
          method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
          // header: {}, // 设置请求的 header
          success: function(res){
            self.access_token=res.data.access_token;
            // self.getOpenId(self.userCode);
            wx.request({
            url: 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token='+res.data.access_token,
            data: {
              touser:self.openid,
              template_id:'H7Jftk34h9eqj-clnLVIGElIX3H0jQ7Urlr2AU7p9VM',
              form_id:e.mp.detail.formId,
              data: {
                keyword1:{
                    value: '我爱看书',
                    color: '#173177'
                },
                keyword2:{
                    value: '张三',
                    color: '#173177'
                },
                keyword3:{
                    value: '女',
                    color: '#173177'
                },
                keyword4:{
                    value: '13802706994',
                    color: '#173177'
                },
                keyword5:{
                    value: 'VIP',
                    color: '#173177'
                }
              }
            },
            method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
            // header: {}, // 设置请求的 header
            success: function(res){
              console.log('成功' + res);
              // this.access_token=;
            },
            fail: function(err) {
              console.log('失败' + err);
            },
            complete: function() {
              console.log('complete');
            }
          })
          },
          fail: function(err) {
            console.log('失败' + err);
          },
          complete: function() {
          }
        })
      },
      getOpenId (code) {
        var self=this;
        wx.request({
          url: 'https://api.weixin.qq.com/sns/jscode2session',
          data: {
            'grant_type':'authorization_code',
            'appid': 'wxf999affa32d4c44e',
            'secret': 'eae5cfd2ea6628d56433240470ce3e5c',
            'js_code':code
          },
          method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
          // header: {}, // 设置请求的 header
          success: function(res){
            console.log('成功' + res);
            // this.access_token=;
          },
          fail: function(err) {
            console.log('失败' + err);
          },
          complete: function() {
          }
        })
    }
  },
 

  created () {
    // 调用应用实例的方法获取全局数据
    this.getUserInfo();
  }
}
</script>

<style scoped>
form{
  width:100%;
}
view.row{
  display:flex;
  background:#ffffff;
  margin-bottom:2px;
  height:80rpx;
  line-height:80rpx;
  padding:0px 10px;
}
.row label{
  width:250rpx;
  font-size:16px;
  padding:0 10rpx;
}
.form-container{
  padding:40rpx 0;
  font-size:14px;
}
.submit-row{
  margin-top:30px;
}
.submit-row button{
  margin:0 40rpx;
}
radio.right-radio{
  margin-left:80rpx;
}

/* .userinfo {
  padding:40rpx 0;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 150px;
}

.form-control {
  display: block;
  padding: 0 12px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
} */

</style>
